var settingViewModel = new function () {

    this.FieldSystemList = ko.observableArray(data.FieldSystemList);
    this.ListFields = ko.observableArray(data.ListFields);

    this.UpdateUnMapColumn = function (FieldId) {
        for (var i = 0; i < this.FieldSystemList().length; i++) {
            if (settingViewModel.FieldSystemList()[i].FieldId == FieldId) {
                settingViewModel.FieldSystemList()[i].Tag = "";
                break;
            }
        }
    };

    this.UpdateMapColumn = function (_newid, _currentid, tagName) {
        for (var i = 0; i < data.FieldSystemList.length; i++) {
            if (data.FieldSystemList[i].FieldId == _currentid) {
                data.FieldSystemList[i].FieldId = _newid;
                data.FieldSystemList[i].Tag = tagName;
                break;
            }
        }

        // Update knockout
        settingViewModel.FieldSystemList(data.FieldSystemList);
    };

    // Function update data
    this.ChangeSettings = function () {
        var dataPost = { "UpdateSetting": data.FieldSystemList };

        // Retrieve data
        // Json Get function to retrive data from server
        openProcess();

        // Ajax request
        // Build a list params
        // Call a request
        // Handle reponse
        $.ajax({
            type: "POST",
            url: "/ChangeSettings/UpdateSetting",
            contentType: "application/json; charset=utf-8",
            dataType: "JSON",
            data: JSON.stringify(dataPost),
            success: function (model, textStatus, jqXHR) {
                hideProcess();
                if (model == undefined || model == null || model == "") {
                    window.location = "/ChangeSettings";
                }
                else {
                    // Stop progress bar
                    showPopupError();
                }
            },
            error: function (xhr, status, error) {
                // Stop progress bar
                hideProcess();
                showPopupError();
            }
        });
    };
}

ko.bindingHandlers.itemDrag =
{
    init: function (element) {
        $(element).draggable
        ({
            revert: "invalid",
            containment: '#wrapper',
            appendTo: 'body',
            helper: 'clone'
        });
    }
}

ko.bindingHandlers.itemDrop =
{
    init: function (element) {
        $(element).droppable({
            accept: ".i-matched1",
            drop: function (event, ui) {
                var _newid = ui.draggable.find('.FieldName').attr("id");
                var DragFieldName = ui.draggable.find(".FieldName").text();
                $('#leftPanel .active .i-unmatched').replaceWith(ui.draggable.html());

                var _currentid = $('#leftPanel').find('.active').find(".headername").attr("id");
                $('#leftPanel').find('.active').removeClass('active');
                $('#leftPanel .FieldName').addClass('i-matched ui-draggable');

                ui.draggable.remove();
                settingViewModel.UpdateMapColumn(_newid, _currentid, DragFieldName);

                $('.match-header').css("overflow", "auto");
                $('.panel').css("overflow", "auto");
            }
        });
    }
}

ko.bindingHandlers.itemDropBack =
{
    init: function (element) {
        $(element).droppable({
            accept: ".i-matched",
            drop: function (event, ui) {

                var FieldId = ui.draggable.parent().find(".headername").attr("id");
                $('#' + FieldId + 'M').parent().addClass('active');
                $('#' + FieldId + 'M').replaceWith("<span class='i-unmatched'></span>");
                ui.draggable.remove();
                settingViewModel.UpdateUnMapColumn(FieldId);

                $('.match-header').css("overflow", "auto");
                $('.panel').css("overflow", "auto");

            }
        });
    }
}

ko.bindingHandlers.itemDragBack =
{
    init: function (element) {
        $(element).draggable({
            revert: 'invalid',
            containment: '#wrapper',
            start: function () {
                $('#matchrightside').css("z-index", "1000");
                $('.match-header').css("overflow", "visible");
                $('.panel').css("overflow", "visible");
                $('#matchrightside .i-matched').css("z-index", "100");
                $('#matchrightside .i-matched1').css("z-index", "100");
            },
            appendTo: '#matchrightside',
            helper: 'clone'
        });
    }
}


ko.applyBindings(settingViewModel, document.getElementById("settings"));